<!--栏目管理-->
<template>
  <div class="contain">
    <!-- 搜索区域 -->
    <div class="source">
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="parames.realname"
            placeholder="请输入真实姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="parames.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="load">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->

    <div class="table">
      <el-table :data="tableData.list" style="width: 100%" height="calc(100vh - 180px)">
        <el-table-column
          prop="id"
          label="栏目编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="栏目名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="icon"
          label="图标"
          align="center"
        ></el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableData.page + 1"
        :page-sizes="[5, 8, 10, 12]"
        :page-size="tableData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="栏目名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input v-model="form.icon" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

  <script>
import axios from "@/utils/request.js";

import qs from '@/utils/qs.js'
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      title: "",
      parames: {
        page: 0,
        pageSize: 10,
      },
      tableData: {},
      formInline: {
        user: "",
        region: "",
      },
      currentPage4: 4,

      dialogFormVisible: false,
      form: {
        type: "category",
        password: "123321",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    load() {
      //加载数据
      axios.post("/category/query", this.parames).then((res) => {
        // console.log(res)
        this.tableData = res.data;
      });
    },
    //分页
    handleSizeChange(val) {
      this.parames.pageSize = val;
      this.load();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.parames.page = val - 1;
      this.load();

      // console.log(`当前页: ${val}`);
    },
    // 查询
    add() {
      this.title = "新增栏目";
      this.dialogFormVisible = true;
    },
    //提交
    onSubmit() {
      console.log(this.form, "栏目输入");
      axios
        .post("/category/saveOrUpdate",this.form)
        .then((res) => {
          //  console.log(res)

          this.$message({
            message: res.message,
            type: "success",
          });
          this.dialogFormVisible = false;
          this.load();
        });
    },
    // 编辑
    handleEdit(index, row) {
      this.title = "修改栏目";
      this.dialogFormVisible = true;
      this.form = { ...row };
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .get("/category/deleteById?id=" + row.id)
          .then((res) => {
            this.load();
            this.$message({
              message: res.message,
              type: "success",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    //详情
    handleDetails(index, row) {
      this.$router.push({ path: "categoryDetails", query: { row } });
    },
  },

  created() {
    this.load();
  },
};
</script>
<style scoped>
</style>
